/* Theme Variables */
:root {
  /* Light Theme Colors */
  --bg-primary-light: #ffffff;
  --bg-secondary-light: #f8fafc;
  --bg-tertiary-light: #f1f5f9;
  --bg-card-light: #ffffff;
  --bg-input-light: #ffffff;
  --bg-header-light: #f8fafc;
  --bg-sidebar-light: #ffffff;
  
  --text-primary-light: #111827;
  --text-secondary-light: #374151;
  --text-muted-light: #6b7280;
  --text-inverse-light: #ffffff;
  
  --border-light: #d1d5db;
  --border-hover-light: #9ca3af;
  --border-focus-light: #22c55e;
  
  --shadow-light: rgba(0, 0, 0, 0.1);
  --shadow-card-light: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-hover-light: 0 4px 6px rgba(0, 0, 0, 0.1);
  
  /* Dark Theme Colors */
  --bg-primary-dark: #1e2125;
  --bg-secondary-dark: #2d3035;
  --bg-tertiary-dark: #374151;
  --bg-card-dark: #2d3035;
  --bg-input-dark: #1e2125;
  --bg-header-dark: #2d3035;
  --bg-sidebar-dark: rgba(18, 18, 18, 0.95);
  
  --text-primary-dark: #ffffff;
  --text-secondary-dark: #d1d5db;
  --text-muted-dark: #9ca3af;
  --text-inverse-dark: #1a1a1a;
  
  --border-dark: #3d4045;
  --border-hover-dark: #4b5563;
  --border-focus-dark: #22c55e;
  
  --shadow-dark: rgba(0, 0, 0, 0.3);
  --shadow-card-dark: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-hover-dark: 0 8px 25px rgba(0, 0, 0, 0.15);
  
  /* Accent Colors (same for both themes) */
  --accent-primary: #22c55e;
  --accent-primary-hover: #16a34a;
  --accent-secondary: #3b82f6;
  --accent-secondary-hover: #2563eb;
  --accent-danger: #ef4444;
  --accent-danger-hover: #dc2626;
  --accent-warning: #f59e0b;
  --accent-warning-hover: #d97706;
  --accent-success: #22c55e;
  --accent-success-hover: #16a34a;
  --accent-info: #3b82f6;
  --accent-info-hover: #2563eb;
  
  /* Disabled State Colors */
  --bg-disabled-light: #9ca3af;
  --bg-disabled-dark: #4b5563;
  --bg-disabled-hover-light: #6b7280;
  --bg-disabled-hover-dark: #374151;
  
  /* Gradient Colors */
  --gradient-primary: linear-gradient(135deg, #22c55e, #16a34a);
  --gradient-secondary: linear-gradient(135deg, #3b82f6, #2563eb);
  --gradient-gold: linear-gradient(135deg, #fbbf24, #f59e0b);
  --gradient-danger: linear-gradient(135deg, #ef4444, #dc2626);
}

/* Light Theme */
.light,
[data-theme="light"] {
  --bg-primary: var(--bg-primary-light);
  --bg-secondary: var(--bg-secondary-light);
  --bg-tertiary: var(--bg-tertiary-light);
  --bg-card: var(--bg-card-light);
  --bg-input: var(--bg-input-light);
  --bg-header: var(--bg-header-light);
  --bg-sidebar: var(--bg-sidebar-light);
  --bg-disabled: var(--bg-disabled-light);
  --bg-disabled-hover: var(--bg-disabled-hover-light);
  
  --text-primary: var(--text-primary-light);
  --text-secondary: var(--text-secondary-light);
  --text-muted: var(--text-muted-light);
  --text-inverse: var(--text-inverse-light);
  
  --border: var(--border-light);
  --border-hover: var(--border-hover-light);
  --border-focus: var(--border-focus-light);
  
  --shadow: var(--shadow-light);
  --shadow-card: var(--shadow-card-light);
  --shadow-hover: var(--shadow-hover-light);
}

/* Dark Theme */
.dark,
[data-theme="dark"] {
  --bg-primary: var(--bg-primary-dark);
  --bg-secondary: var(--bg-secondary-dark);
  --bg-tertiary: var(--bg-tertiary-dark);
  --bg-card: var(--bg-card-dark);
  --bg-input: var(--bg-input-dark);
  --bg-header: var(--bg-header-dark);
  --bg-sidebar: var(--bg-sidebar-dark);
  --bg-disabled: var(--bg-disabled-dark);
  --bg-disabled-hover: var(--bg-disabled-hover-dark);
  
  --text-primary: var(--text-primary-dark);
  --text-secondary: var(--text-secondary-dark);
  --text-muted: var(--text-muted-dark);
  --text-inverse: var(--text-inverse-dark);
  
  --border: var(--border-dark);
  --border-hover: var(--border-hover-dark);
  --border-focus: var(--border-focus-dark);
  
  --shadow: var(--shadow-dark);
  --shadow-card: var(--shadow-card-dark);
  --shadow-hover: var(--shadow-hover-dark);
}

/* Global Styles */
* {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

/* Common Component Styles */
.theme-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
}

.theme-card:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow-hover);
}

.theme-input {
  background-color: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-primary);
}

.theme-input:focus {
  border-color: var(--border-focus);
  outline: none;
}

.theme-input::placeholder {
  color: var(--text-muted);
}

.theme-button-primary {
  background-color: var(--accent-primary);
  color: var(--text-inverse);
  border: none;
}

.theme-button-primary:hover {
  background-color: var(--accent-primary-hover);
}

.theme-button-secondary {
  background-color: var(--accent-secondary);
  color: var(--text-inverse);
  border: none;
}

.theme-button-secondary:hover {
  background-color: var(--accent-secondary-hover);
}

.theme-text-primary {
  color: var(--text-primary);
}

.theme-text-secondary {
  color: var(--text-secondary);
}

.theme-text-muted {
  color: var(--text-muted);
}

.theme-bg-primary {
  background-color: var(--bg-primary);
}

.theme-bg-secondary {
  background-color: var(--bg-secondary);
}

.theme-bg-card {
  background-color: var(--bg-card);
}

.theme-border {
  border-color: var(--border);
}

/* Light theme specific adjustments */
.light .gradient-bg {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
}

/* Dark theme specific adjustments */
.dark .gradient-bg {
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
}

/* Animation for theme transitions */
@media (prefers-reduced-motion: no-preference) {
  :root {
    transition: color-scheme 0.3s ease;
  }
}